<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .case {
        padding: 0 0 50px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 50px;
        overflow: hidden;
      }

      #case01 ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 480px;
        margin: 50px auto;
      }

      #case01 ul li {
        width: 100px;
        height: 120px;
        background-color: pink;
        margin: 0px 10px;
        float: left;
      }

      #case01 ul li:hover {
        position: relative;
        top: -10px;
        left: 2px;
      }

      /* 网站导航 */
      body,
      h2,
      ul,
      li {
        margin: 0;
        padding: 0;
      }

      a {
        text-decoration: none;
      }

      #case02 ul {
        height: 50px;
        margin-top: 50px;
        list-style: none;
        background-color: #87ceeb;
        display: flex;
      }

      #case02 ul li {
        float: left;
        line-height: 50px;
      }

      #case02 ul li a {
        display: inline-block;
        padding: 0px 20px;
        height: 50px;
        color: #fff;
      }

      #case02 ul li a:hover {
        position: relative;
        top: -5px;
        height: 60px;
        line-height: 60px;
        background-color: #18b5f3;
      }

      .clearFix::after {
        content: "";
        display: block;
        clear: both;
      }

      /* 水平步骤条 */
      .order-progress {
        text-align: center;
      }

      #case03 ul {
        margin-top: 50px;
        font-size: 0;
        list-style: none;
        display: inline-block;
      }

      #case03 ul li {
        float: right;
      }

      #case03 ul li:nth-child(even) {
        width: 150px;
        border-top: 2px dashed #ddd;
        position: relative;
        top: 24px;
      }

      #case03 ul li:nth-child(odd) {
        background-color: #ddd;
        width: 50px;
        height: 50px;
        font-size: 16px;
        margin: 0px 5px;
        line-height: 50px;
        text-align: center;
        border-radius: 50%;
      }

      #case03 ul li.current {
        background-color: #87ceeb;
        color: #fff;
      }

      #case03 ul li.current ~ li:nth-child(odd) {
        background-color: #87ceeb;
        color: #fff;
      }

      #case03 ul li.current ~ li:nth-child(even) {
        border-color: #87ceeb;
      }

      /* 绝对定位的盒子垂直、水平居中 */
      #case41 div {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        margin: 50px auto;
        position: relative;
      }

      #case41 div p {
        width: 100px;
        height: 100px;
        background-color: #87ceeb;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
      }

      #case42 div {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        margin: 50px auto;
        position: relative;
      }

      #case42 div p {
        width: 100px;
        height: 100px;
        background-color: #87ceeb;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /* 4-绝对定位实现元素定位在父元素右上角 */

      #case43 .box {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        position: relative;
      }

      #case43 .item1 {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        top: 0;
        right: 0;
      }

      /* 绝对定位实现黑色半透明遮罩层 */
      #case05 .box {
        width: 300px;
        /* height: 300px; */
        position: relative;
      }

      #case05 img {
        display: block;
      }

      #case05 .box::before {
        display: none;
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
      }

      #case05 .box .icon-play {
        display: block;
        width: 80px;
        height: 80px;
        background: url(./images/play.svg) no-repeat center;
        background-size: cover;
        position: absolute;
        left: 110px;
        top: 110px;
        display: none;
      }

      #case05 .box:hover::before {
        display: block;
      }

      #case05 .box:hover span {
        display: block;
      }

      /* 绝对定位实现带三角形的会话框 */
      #case06 .head {
        width: 124px;
        margin: 50px 0;
        position: relative;
      }

      /* 头像样式 */
      #case06 .head img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 2px solid #87ceeb;
      }

      #case06 .head-txt {
        width: 200px;
        height: 140px;
        background-color: #87ceeb;
        position: absolute;
        left: 124px;
        top: -20px;
        border-radius: 20px;
        line-height: 100px;
        text-align: center;
        display: none;
      }

      #case06 .head-txt::after {
        display: block;
        content: "";
        width: 0;
        border: 20px solid transparent;
        border-right-color: #87ceeb;
        position: absolute;
        top: 50px;
        left: -40px;
      }

      #case06 .head:hover .head-txt {
        display: block;
      }

      /* 鼠标移入展开动画 */

      #case61 a {
        color: #000;
        font-size: 20px;
        display: block;
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        text-decoration: none;
        position: relative;
      }

      #case61 a::after {
        content: "";
        height: 10px;
        background-color: skyblue;
        position: absolute;
        left: 50%;
        right: 50%;
        bottom: 0;
        transition: left 0.5s, right 0.5s;
      }

      #case61 a:hover::after {
        left: 0;
        right: 0;
      }

      /* 固定定位实现返回顶部 */

      html {
        scroll-behavior: smooth; /* 平滑滚动 */
      }

      .top {
        display: block;
        width: 60px;
        height: 50px;
        background-color: #999;
        color: #fff;
        font-size: 12px;
        text-align: center;
        line-height: 50px;
        text-decoration: none;
        /* 固定定位 */
        position: fixed;
        bottom: 100px;
        right: 20px;
      }

      .top:hover {
        background-color: #ffd700;
      }

      /* 常见的登录弹窗效果 */
      input {
        margin: 0;
        border: 0;
      }

      /* 黑色半透明遮罩层 */
      #case07 .mask {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgb(0, 0, 0, 0.5);
        visibility: hidden;
      }
      #case07 .login {
        background: #fff;
        border: 1px solid #000;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 40px;
        pointer-events: none;
        visibility: hidden;
      }
      #case07 .login::after {
        content: "✖";
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        pointer-events: auto;
      }
      #case07 .login form input {
        border: 1px solid #000;
        width: 360px;
        height: 50px;
        outline: none;
        margin: 10px;
        font-size: 25px;
      }
      #case07 .login form input::placeholder {
        /* font-size: 25px; */
        position: relative;
      }
      #case07 .login form input[type="submit"] {
        color: #fff;
        border: none;
        background-color: #ff6347;
        cursor: pointer;
        pointer-events: auto;
      }

      #case07 .show {
        pointer-events: auto;
      }
    </style>
  </head>
  <body>
    <div id="case01" class="case">
      <h2>鼠标滑动到元素，元素少量位置偏移动画</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>

    <div id="case02" class="case">
      <h2>网站导航</h2>
      <ul class="menu clearFix">
        <li><a href="#">首页</a></li>
        <li><a href="#">免费直播课</a></li>
        <li><a href="#">web前端工程师</a></li>
        <li><a href="#">Java架构师</a></li>
        <li><a href="#">实战案例视频</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </div>

    <div id="case03" class="case">
      <h2>水平步骤条</h2>
      <ul>
        <li>5</li>
        <li></li>
        <li>4</li>
        <li></li>
        <li class="current">3</li>
        <li></li>
        <li>2</li>
        <li></li>
        <li>1</li>
      </ul>
    </div>

    <div id="case41" class="case">
      <h2>绝对定位的盒子垂直、水平居中 - 使用 top、left、margin 属性 实现元素水平垂直居中</h2>
      <div><p></p></div>
    </div>

    <div id="case42" class="case">
      <h2>绝对定位的盒子垂直、水平居中 - 使用 transform 属性</h2>
      <div><p></p></div>
    </div>

    <div id="case43" class="case">
      <h2>绝对定位实现元素定位在父元素右上角</h2>
      <div class="box">
        <div class="item1"></div>
      </div>
    </div>

    <div id="case05" class="case">
      <h2>绝对定位实现黑色半透明遮罩层</h2>
      <div class="box">
        <img src="./images/01.jpg" alt="image" width="300px" />
        <span class="icon-play"></span>
      </div>
    </div>

    <div id="case06" class="case">
      <h2>绝对定位实现带三角形的会话框</h2>
      <div class="head">
        <img src="./images/01.jpg" alt="image" width="300px" />
        <div class="head-txt">我是吃瓜的</div>
      </div>
    </div>

    <div id="case61" class="case">
      <h2>鼠标移入展开动画</h2>
      <a href="#">点击进入</a>
    </div>

    <div id="top">
      <a href="#case01" class="top">返回顶部</a>
    </div>

    <div id="case07" class="case">
      <h2>常见的登录弹窗效果</h2>
      <a href="#" id="reg" class="show">登录(点击出线登录弹窗，点窗体x关闭)</a>
      <a href="#" id="log" class="show">注册(点击出线登录弹窗，点窗体x关闭)</a>

      <div class="mask"></div>
      <div class="login">
        <form action="#" method="get">
          <div class="user-name">
            <input type="text" placeholder="用户名" />
          </div>
          <div class="user-pwd">
            <input type="password" name="user-pwd" placeholder="密码" />
          </div>
          <div>
            <input type="submit" value="登录" />
          </div>
        </form>
      </div>
    </div>

    <script>
      let div1 = document.querySelector(".login");
      let mask1 = document.querySelector(".mask");
      div1.addEventListener("click", () => {
        mask1.style.visibility = "hidden";
        div1.style.visibility = "hidden";
      });

      let reg1 = document.getElementById("reg");
      reg1.addEventListener("click", (event) => {
        event.preventDefault();
        mask1.style.visibility = "visible";
        div1.style.visibility = "visible";
      });

      let log1 = document.getElementById("log");
      log1.addEventListener("click", (event) => {
        event.preventDefault();
        mask1.style.visibility = "visible";
        div1.style.visibility = "visible";
      });
    </script>
  </body>
</html>
